<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <div class="logo" @click="$router.push('/dashboard')">
          <img
            src="@/assets/myblog.png"
            alt="Logo"
            style="height: 40px; vertical-align: middle; margin-right: 10px"
          />
          <a class="home-class"> 博客系统 </a>
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/dashboard">
            <i class="el-icon-s-home"></i>首页
          </el-menu-item>
          <el-menu-item
            :index="!isAdminRole ? '/blog/create' : '/blogs'"
            v-if="isLogin"
          >
            <i class="el-icon-document"></i>
            {{ !isAdminRole ? "发布博客" : "博客管理" }}
          </el-menu-item>
          <el-menu-item index="/admin/users" v-if="isAdminRole">
            <i class="el-icon-user-solid"></i>用户管理
          </el-menu-item>
        </el-menu>
        <div class="user-menu">
          <div class="toggle" @click.stop="switchTheme">
            <i
              class="icon-switch"
              :class="isDark ? 'fa fa-sun-o icon-switch-dark' : 'fa fa-moon-o'"
            ></i>
          </div>
          <el-dropdown v-if="isLogin" @command="handleUserCommand">
            <span class="el-dropdown-link">
              {{ user.username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人主页</el-dropdown-item>
              <el-dropdown-item command="edit">编辑资料</el-dropdown-item>
              <el-dropdown-item command="password">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            type="text"
            @click="$router.push('/auth/login')"
            v-if="!isLogin"
            >登录</el-button
          >
          <el-button
            type="text"
            @click="$router.push('/auth/register')"
            v-if="!isLogin"
          >
            注册
          </el-button>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer class="footer">
        <p>© 2025 博客系统 - 版权所有</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: "/",
        // user: null,
        // isDark: false,
        // targetPath: "/",
      };
    },
    computed: {
      isLogin() {
        // return !!this.user;
        return this.$store.getters.isLogin;
      },
      isAdminRole() {
        // return this.user && this.user.role === "admin";
        return this.$store.getters.isAdminRole;
      },
      user() {
        return this.$store.getters.user;
      },
      isDark() {
        return this.$store.getters.isDark;
      },
    },
    watch: {
      $route(to) {
        this.activeIndex = to.path;
      },
    },
    created() {
      // this.loadUserInfo();
      this.activeIndex = this.$route.path;
    },
    mounted() {
      if (this.isDark) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    },
    methods: {
      toHome() {
        if (this.$route.path !== "/dashboard") {
          this.$router.push("/dashboard");
        }
      },
      switchTheme() {
        // console.log("switchTheme: ", typeof this.isDark);
        this.$store.dispatch("setDarkMode", !this.isDark);
        document.documentElement.classList.toggle("dark");
      },
      handleMenuSelect(index) {
        if (this.$route.path !== index) this.$router.push(index);
      },
      handleUserCommand(command) {
        let targetPath = "/";
        switch (command) {
          case "profile":
            targetPath = `/user/${this.user.userId}`;
            // this.$router.push(`/user/${this.user.userId}`);
            break;
          case "edit":
            targetPath = `/user/${this.user.userId}/edit?type=profile`;
            // this.$router.push("/profile/edit");
            break;
          case "password":
            targetPath = "/profile/change-password";
            // this.$router.push("/profile/change-password");
            break;
          case "logout":
            this.handleLogout();
            break;
        }
        if (this.$route.path !== targetPath) {
          this.$router.push(targetPath);
        }
      },
      handleLogout() {
        // localStorage.removeItem("token");
        // localStorage.removeItem("user");
        // this.user = null;
        // this.$message.success("退出登录成功");
        // this.$router.push("/");
        // 调用 Vuex 的 logout 动作
        this.$store.dispatch("logout");
        this.$message.success({
          message: "退出登录成功",
          type: "success",
          duration: 100,
        });
        // this.$router.push("/");
      },
    },
  };
</script>

<style>
  html {
    background-color: #ffffff;
  }

  html.dark {
    background: #141414;
    transition: ease-in-out;
    transition: background-color 0.5s easy;
  }
  .toggle {
    display: inline-block;
    margin-right: 20px;
  }
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .home-class {
    color: #303133;
    cursor: pointer;
  }
  .dark .home-class {
    /* text-decoration: none; */
    background-color: #3d3d3d;
    color: #e5dcdb;
  }

  .el-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #f6f8f8; */
    padding: 0 20px;
    height: 60px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  /* .header:is(.dark *)  */
  .dark .header {
    background-color: #3d3d3d;
    box-shadow: 0 1px 4px rgba(216, 216, 216, 0.3);
  }
  .logo {
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 0 20px;
  }

  .el-menu-demo {
    background-color: transparent;
  }

  .el-menu-demo .el-menu-item {
    color: white;
  }

  .el-menu-demo .el-menu-item.is-active {
    color: #409eff;
    background-color: transparent;
  }
  .user-menu {
    color: white;
    padding: 0 20px;
  }

  .el-dropdown-link {
    /* color: white; */
    cursor: pointer;
  }

  .footer {
    text-align: center;
    padding: 20px 0;
    /* background-color: #f5f5f5; */
  }
  .icon-switch {
    color: gray;
    /* border: 1px solid gray; */
    border-radius: 100%;
  }
  .icon-switch-dark {
    color: #fff;
  }
</style>
